<template>
	<view v-if="anShow">
		<u-popup v-model="anShow" mode="bottom" border-radius="20">
			<view class="tophe">
				<view class="left">
					<u-image width="60rpx" height="60rpx" shape="circle" src="@/static/ico/logo.jpg"></u-image>
					<text style="font-weight: bold;font-size: 30rpx;">小熊快递</text>
					<text style="color:#606266;">申请</text>
				</view>
				<view class="right">
					<u-icon name="info-circle" color="#fbe237" size="48"></u-icon>
				</view>
			</view>
			<view class="useHead">
				<text style="font-weight: bold;font-size: 34rpx;">获取你的昵称、头像、地区</text>
				<view class="cent">
					<view class="head">
						<open-data class="a2" type="userAvatarUrl"></open-data>
					</view>
					<view class="text3">
						<open-data style="font-size: 30rpx;font-weight: bolder;" type="userNickName"></open-data>
						<view><text>微信个人信息</text></view>
					</view>
				</view>
				
			</view>
			
			<view class="shouquan">
				<u-button type="success" size="medium" open-type="getUserInfo" @getuserinfo="openUse">授权</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {updataUse} from "request/userInfo.js"
	export default {
		name:"phone",
		data() {
			return {
				useInfo:null,
				ordeList:null,//订单列表
				anShow:false//授权弹窗
			};
		},
		methods:{
			//获取用户信息
			openUse(val){
				this.anShow=false
				this.useInfo=JSON.parse(val.detail.rawData)
				//console.log(this.useInfo)
				this.sendUse(this.useInfo.nickName,this.useInfo.avatarUrl,this.useInfo.gender)
			},
			getUseInfo(){
				var that=this
				uni.getSetting({
				   success(res) {
				      //console.log(res.authSetting)
					  if(res.authSetting["scope.userInfo"]){
							//console.log('有授权')
							uni.getUserInfo().then(res=>{
						  	that.useInfo=res[1].userInfo
						  	//console.log(that.useInfo)
						  	that.sendUse(that.useInfo.nickName,that.useInfo.avatarUrl,that.useInfo.gender)
						  })
					  }else{
						  that.anShow=true
						  //console.log('没授权')
					  }
				   }
				})
			},
			//发送到后端
			sendUse(nick_name,head_img,sex){
				updataUse(nick_name,head_img,sex)
			}
		},
		mounted(){
			this.getUseInfo()
		}
	}
</script>

<style lang="scss">
.tophe{
	margin: 0 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left{
		display: flex;
		align-items: center;
		text{
			margin: 20rpx;
		}
	}
	
}
.useHead{
	margin: 0 20rpx;
	.cent{
		display: flex;
		align-items: center;
		margin-top: 15rpx;
		.head{
			 overflow:hidden;  
			  display: block;  
			  width: 120rpx;  
			  height: 120rpx;
			  border: 2px solid #fff;  
			  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);  
		}
		.text3{
			margin-left: 20rpx;
		}
	}
	
}
.shouquan{
	margin:20rpx 10rpx;
		display: flex;
		justify-content: center;
}
</style>
